<!--
 * @Description: 发起流程
 * @Author: wangwangwang
 * @Date: 2020-07-15 11:37:52
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-03 16:26:19
-->
<template>
	<div class="pages_content NewTask">
		<div class="top">
			<div class="breaDcrumb">
				<breaDcrumb />
			</div>
			<div class="search">
				<span>
					<span style="margin-right: 12px;">流程搜索</span>
					<el-input v-model="name" style="width: 20%;max-width: 200px;" clearable placeholder="请输入" />
				</span>
				<span style="margin-left: 36px;">
					<span style="margin-right: 12px;">编码</span>
					<el-input v-model="code" style="width: 20%;max-width: 200px;" clearable placeholder="请输入" />
				</span>
				<el-button icon="el-icon-search" size="medium" class="bottom_all" @click="initSystemList()">查 询</el-button>
				<el-button size="medium" class="bottom_all_two" @click="reset()">重 置</el-button>
			</div>
		</div>
		<div class="bottom">
			<div v-for="item in systemList" :key="item.id" class="card">
				<div class="card_hr"></div>
				<div class="card_top">
					<div>{{item.name}}</div>
				</div>
				<div class="card_info">
					<div v-for="list in item.childrend" :key="list.id" class="item" @click="handleNewFlows(list)">
						<div class="block"></div>
						<div>{{list.processManagerName}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import breaDcrumb from '@/components/breadcrumb';
import { queryPage } from '@/api/basedata/business';
import { getFlowsList2 } from '@/api/Signed/flows.js';
export default {
	components: {
		breaDcrumb
	},
	data() {
		return {
			systemList: [],
			name: '',
			code: '',
		};
	},
	methods: {
		reset() {
			this.name = '';
			this.code = '';
			this.initSystemList();
		},
		initData() {
			this.loading = true;
			const params = {
				searchText: this.name,
				code: this.code,
				page: 1,
				pageSize: 1000
			}
			getFlowsList2(params).then(res => {
				if (res.code === 1001) {
					for (let i = 0; i < this.systemList.length; i += 1) {
						for (let j = 0; j < res.data.length; j += 1) {
							if (res.data[j].systemId === this.systemList[i].id) { // 只有自定义表单才能从这里发起流程
								this.systemList[i].childrend.push(res.data[j])
							}
						}
					}
				}
			})
		},
		initSystemList() {
			queryPage({ page: 1, pageSize: 1000 }).then(res => {
				if (res.code === 1001) {
					this.systemList = res.data.data.map((item) => (
						{
							childrend: [],
							id: item.id,
							name: item.name,
						}
					));
					this.initData();
				}
			});
		},
		handleNewFlows(data) {
			const query = {
				id: data.processManagerId,
				name: data.processManagerName,
				versionId: data.processVersionId,
				systemName: data.systemName,
				code: data.code
			}
			this.$router.push({ name: 'taskCenter', query });
		},
	},
	mounted() {
		this.initSystemList();
	}
};
</script>

<style lang="scss" scoped>
.card {
  border-radius: 4px;
  overflow: hidden;
  font-size: 14px;
  box-shadow: 0px 0px 6px rgba(0, 167, 84, 0.12);
  width: 23%;
  margin: 0 1%;
  float: left;
  height: 100%;
  background: #fff;
}
.card_hr {
  height: 4px;
  width: 100%;
  background: $bg_color;
}
.card_top {
  @include discen_al;
  justify-content: space-between;
  background: $bg_colorTable;
  color: $bg_color;
  font-weight: bold;
  height: 44px;
  padding: 0 20px;
}
.card_info {
  cursor: pointer;
  padding: 7px 20px;
  .item {
    padding: 7px 0;
    @include discen_al;
    .block {
      background: $bg_color;
      height: 8px;
      width: 8px;
      margin-right: 8px;
    }
  }
}
.NewTask {
  background: rgba(0, 0, 0, 0);
  .top {
    border-radius: 4px;
    overflow: hidden;
    .search {
      padding: 20px;
      background: #ffffff;
    }
    .breaDcrumb {
      height: 60px;
      @include discen_al;
      padding: 0 20px;
      background: #f7f9fc;
    }
  }
  .bottom {
    padding: 20px 0 0;
    height: calc(100% - 137px);
    overflow: hidden;
  }
}
</style>
